<!DOCTYPE html>
<html lang="{$config.language}">
    <head>
        {include file="common/meta" /}

        <style type="text/css">
            body {
				padding: 0;
				margin: 0;
			}

			.title {
				width: 100%;
				height: 340px;
				text-align: center;
				margin: 0 auto;
				line-height: 30px;
			}

			.wrap {
				position: relative;
				height: 340px;
				background: url({$background}) no-repeat center center;
				-webkit-background-size: 100%;
				background-size: 100%;
				
			}

			.wrap-mask {
				height: 340px;
				background: rgba(54,162,224, 0.8);
				 
			}

			.title-text {
				position: absolute;
				top: 60%;
				left: 50%;
				width: 800px;
				height: 180px;
				margin-left: -400px;
				margin-top: -90px;
				color: #fff;
				
			}

			.title-text p:first-child {
				font-size: 60px;
			}
			.title-text p:last-child {
				font-size: 18px;
				padding-top: 40px;
			}
			.title-text p:first-child img {
				padding-right: 10px;
				padding-bottom: 10px;
			}

			.content {
				margin: 0 auto;
				width: 360px;
			}

			#login-form {
				margin-top: 60px;
			}

			#login-form .input-group {
				margin-bottom: 20px;
			}

			.footer .copyright{
				font-size: 12px;
				text-align: center;
    			color: #666;
			}

			.footer .beian{
				font-size: 12px;
				text-align: center;
			}
			.footer .beian a {
    			color: #666;
    			margin-right: 15px;
			}
			.footer .beian a:last-child {
    			margin-right: 0px;
			}

			.btn-sytle {
				background-color: rgb(54,162,224);
				color: #fff;
				height: 50px;
			}

			.btn-sytle:hover {
				background-color: rgba(54,162,224, 0.8);
				color: #fff;
			}

			.input-group-addon {
				color: #CCCCCC;
			}

			.form-control {
				height: 50px;
				font-size: 16px;
				/* border-right: none; */
			}

			.input-group-addon {
				background-color: #fff;
				border-left: none;
			}

        </style>
    </head>
    <body>
		<!-- 背景标题 -->
		<div class="title">
			<div class="wrap">
				<div class="wrap-mask"></div>
				<div class="title-text">
					<p><img src="__CDN__/assets/img/logo.png" width="80">{$Think.config.site.name}</p>
					<p>{:__('Welcome Sign in')}{$Think.config.site.name}</p>
				</div>
			</div>
		</div>
		
		<div class="content">
			<form action="" method="post" id="login-form">
				<div id="errtips" class="hide"></div>
                {:token()}
				<div class="input-group">
					<input type="text" class="form-control" id="pd-form-username" placeholder="{:__('Username')}" name="username" autocomplete="off"
					 value="" data-rule="{:__('Username')}:required;username" />
					<div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
				</div>

				<div class="input-group">
					<input type="password" class="form-control" id="pd-form-password" placeholder="{:__('Password')}" name="password" autocomplete="off"
					 value="" data-rule="{:__('Password')}:required;password" />
					<div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
				</div>
				
				{if $Think.config.fastadmin.login_captcha}
				<div class="input-group">
					<input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)" />
					<div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></div>
					<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
						<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>
					</span>
				</div>
				{/if}
				
				<div class="form-group">
					<label class="inline" for="keeplogin">
						<input type="checkbox" name="keeplogin" id="keeplogin" value="1" />
						{:__('Keep login')} </label>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-sytle btn-lg btn-block">{:__('Sign in')}</button>
				</div>
			</form>
		</div>
		
		<div class="footer">
			<p class="copyright">{$Think.config.site.copyright}</p>
			<p class="beian">
				{if $Think.config.site.beian}
				<a href="http://beian.miit.gov.cn" target="_blank">{$Think.config.site.beian}</a>
				{/if}
				{if $Think.config.site.sbeian}
				<a href="{$Think.config.site.sbeianurl}" target="_blank"><img src="__CDN__/assets/img/sbeian.png" width="18"> {$Think.config.site.sbeian}</a>
				{/if}
			</p>
		</div>
        {include file="common/script" /}
    </body>
</html>